<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <link rel="stylesheet" type="text/css" href="https://ad.aicebar.com/public/lib/css/style.css" />
  <title>支付结果</title>
  <script src="https://ad.aicebar.com/public/lib/js/vue.min.js"></script>
  <link href="https://ad.aicebar.com/public/lib/css/vant.min.css" rel="stylesheet">
  <script src="https://ad.aicebar.com/public/lib/js/vant.min.js"></script>
  <style>
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .icon {
      width: 1.8rem;
      height: .6rem;
      margin: .4rem;
    }

    .txt1 {
      font-size: .3rem;
      color: #333;
      font-weight: bold;
      margin-bottom: .2rem;
    }

    .txt2 {
      font-size: .3rem;
      color: #a5a5a5;
      margin-bottom: .2rem;
    }

    .btn1 {
      width: 90%;
      height: .88rem;
      line-height: .88rem;
      border-radius: .44rem;
      margin-bottom: .3rem;
      text-align: center;
      font-size: .28rem;
      color: white;
      background: #7990F7;
    }

    .btn2 {
      width: 90%;
      height: .88rem;
      line-height: .88rem;
      border-radius: .44rem;
      margin-bottom: .3rem;
      text-align: center;
      font-size: .28rem;
      color: #7990F7;
      border: 1px solid #7990F7;
    }
  </style>
</head>

<body>
  <div id="app">
    <img src="https://yd.tengzhihh.com/image/yqw/da5a12331bd5d5-310x96.png" class="icon">
    <p class="txt1">订单号：{{order}}</p>
    <p class="txt2">1.如果未完成付款，请点击 "继续支付";</p>
    <p class="txt2">2.如果你已完成，请点击 "已完成付款";</p>

    <div class="btn1" @click="handleContinue()">继续支付</div>
    <div class="btn2" @click="handleDone()">已完成付款</div>
  </div>

  <script src="https://ad.aicebar.com/public/lib/js/axios.js"></script>
  <script src="../js/utils.js"></script>
  <script>
    var api = domain()
    var json = getQueryString()
    new Vue({
      el: '#app',
      data() {
        return {
          isShow: true,
          order: json.order,
          obj: '',
          status: ''
        }
      },

      mounted() {

      },
      methods: {
        handleContinue() {
          var data = new FormData();
          data.append('order_no', this.order);
          const headers = {
            'authorization': getAppToken()
          }
          axios.post(api + '/v1/subject/search', data, {
            headers
          })
            .then((res) => {
              var res = res.data.data
              var status = res.status
              if (status == 1) {
                window.location.href = './pay.html?id=' + res.product_id
              } else {
                switchUrl(res.pro_type_sim, res.product_id, res.order_no)
              }
            })

        },
        handleDone() {
          var data = new FormData();
          data.append('order_no', this.order);
          const headers = {
            'authorization': getAppToken()
          }
          axios.post(api + '/v1/subject/search', data, {
            headers
          })
            .then((res) => {
              var res = res.data.data
              var status = res.status
              if (status == 1) {
                this.$toast({
                  message: '您还未完成支付',
                  position: 'middle',
                  duration: 1000
                });
              } else {
                switchUrl(res.pro_type_sim, res.product_id, res.order_no)
              }
            })

        }
      },

    });
  </script>
</body>

</html>